<template>
  <header>
      <img src="@/assets/wode/tou.png" alt="">
       <div class="box">
          <div class="top">
              <div class="left">
                <img src="@/assets/wode/touxiang.jpg" alt="">
                
                <h4>
                  <p>{{this.$store.state.Home.text}}</p>
                  <p>普卡会员</p>
                </h4>
              </div>
              <div class="right">
                  <p>
                    <a class="iconfont icon-tiaoma"></a>
                    <a class="iconfont icon-tishi"></a>
                  </p>
              </div>
          </div>
          <div class="bottom">
             <div @click="huiyuan()">
               <p>0</p>
               <p>积分商城</p>
             </div>
             <div @click="fn()">
               <p>2</p>
               <p>优惠券</p>
             </div>
             <div>
               <p>0</p>
               <p>钱包·充值</p>
             </div>
          </div>
      </div>
      
  </header>
</template>

<script>
export default {
  methods:{
    fn(){
      this.$router.push("/quan")
    },
    huiyuan(){
      this.$router.push("/huiyuan")
    },
  }
}
</script>

<style scoped>
  header{
    width: 100%;
    height: 2.2rem;
    position: relative;
    background: rgb(227, 227, 227);
    padding-bottom:.1rem ;
  }
  header>img{
    width: 100%;
    display:block;
  }
  .box .top{
    position: absolute;
    height: 1rem;
    width: 1rem;
    top: 0;
    z-index: 1;
    color: white;
  }
  .box .top .left>img{
    margin-top: .3rem;
    margin-left: .3rem;
  }
  .box .top .left h4{
    position: absolute;
    left: 1rem;
    top: .3rem;
  }
  .box .top .left h4 p:nth-child(2){
    background: rgb(51,133,61);
    width: .8rem;
    text-align: center;
    font-size: 14px;
    border-radius: .1rem;
    margin-top: .05rem;
  }
  .box .top .right{
    position: absolute;
    left: 2.6rem;
    top: .4rem;
  }
  .box .top .right .iconfont{
    font-size: .22rem;
    margin-left: .18rem;
    font-weight: 600;
    color: white;
  }
  .box .bottom{
    position: absolute;
    display: flex;
    bottom: .6rem;
    color: white;
  }
  .box .bottom>div{
    text-align: center;
    width: 1.23rem;
    border-right: 1px solid rgb(185, 185, 185);
  }
  .box .bottom>div:nth-child(3){
    border: none;
  }
</style>